<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">

<link href="/crm/jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="/crm/jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="/crm/jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="/crm/jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/crm/jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="/crm/jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="text/javascript">

	$(function(){
		
		
		
	});
	
</script>
</head>
<body>

	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form id="addForm" class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select name="owner" class="form-control" id="create-marketActivityOwner">
									<option th:each="user:${#servletContext.getAttribute('users')}"
									th:text="${user.name}" th:value="${user.id}"
									></option>
								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input name="name" type="text" class="form-control" id="create-marketActivityName">
                            </div>
						</div>
						
						<div class="form-group">
							<label class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" name="startDate" class="form-control time" >
							</div>
							<label class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" name="endDate" class="form-control time">
							</div>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" name="cost" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea name="description" class="form-control" rows="3" id="create-describe"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" onclick="saveOrUpdate($(this))" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form id="updateForm" class="form-horizontal" role="form">
						<input type="hidden" id="id" name="id">
						<div class="form-group">
							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" name="owner" id="edit-marketActivityOwner">
									<option th:each="user:${#servletContext.getAttribute('users')}"
											th:text="${user.name}" th:value="${user.id}"
									></option>
								</select>
							</div>
                            <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" name="name" id="edit-marketActivityName" >
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" name="startDate" id="edit-startTime" >
							</div>
							<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" name="endDate" id="edit-endTime" >
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" name="cost" id="edit-cost" >
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" name="description" id="edit-describe">
								</textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" onclick="saveOrUpdate($(this))" class="btn btn-primary">更新</button>
				</div>
			</div>
		</div>
	</div>
	
	
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" id="name" type="text">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" id="owner" type="text">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control time" type="text" id="startDate" />
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control time" type="text" id="endDate">
				    </div>
				  </div>
				  
				  <button type="button" onclick="queryActivities()" class="btn btn-default">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" data-toggle="modal" onclick="openAddModal()"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" onclick="openEditModal()" data-toggle="modal"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" onclick="deleteBatch()" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				  <button type="button" onclick="exportExcel()" class="btn btn-success"><span class="glyphicon glyphicon-minus"></span> 导出报表</button>
				</div>
				
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" /></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="activityBody">

					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 30px;">
				<div id="pagination" ></div>
			</div>
			
		</div>
		
	</div>
</body>
</html>
<link rel="stylesheet" href="/crm/jquery/bs_pagination/jquery.bs_pagination.min.css" />
<script src="/crm/jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
<script src="/crm/jquery/bs_pagination/en.js"></script>
<script>

	refresh(1,3);

	//刷新页面数据
	function refresh(page,pageSize){
		//发送异步请求，查询所有市场活动数据
		$.get('/crm/activity/queryList',{
			'page' : page,//当前页
			'pageSize' : pageSize,//每页记录数
			//查询条件
			'name' : $('#name').val(),//市场活动名称
			'owner': $('#owner').val(),//所有者
			'startDate': $('#startDate').val(),//开始时间
			'endDate': $('#endDate').val()//结束时间
		},function (data) {
			//清空原先内容
			$('#activityBody').html("");
			//data:pageInfo
			for(let activity of data.list){
				$('#activityBody').append("<tr class=\"active\">\n" +
						"\t\t\t\t\t\t\t<td><input class='son' type=\"checkbox\" value="+activity.id+" /></td>\n" +
						"\t\t\t\t\t\t\t<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='/crm/toView/workbench/activity/detail?id="+activity.id+"';\">"+activity.name+"</a></td>\n" +
						"                            <td>"+activity.owner+"</td>\n" +
						"\t\t\t\t\t\t\t<td>"+activity.startDate+"</td>\n" +
						"\t\t\t\t\t\t\t<td>"+activity.endDate+"</td>\n" +
						"\t\t\t\t\t\t</tr>");
			}

			//BootStrap的分页插件
			$("#pagination").bs_pagination({
				currentPage: data.pageNum, // 页码
				rowsPerPage: data.pageSize, // 每页显示的记录条数
				maxRowsPerPage: 30, // 每页最多显示的记录条数
				totalPages: data.pages, // 总页数
				totalRows: data.total, // 总记录条数
				visiblePageLinks: 5, // 显示几个卡片
				showGoToPage: true,
				showRowsPerPage: true,
				showRowsInfo: true,
				showRowsDefaultInfo: true,
				onChangePage : function(event, obj){
					//pageList(obj.rowsPerPage,obj.currentPage);
					refresh(obj.currentPage,obj.rowsPerPage);
				}
			});
		},'json');
	}


	$(".time").datetimepicker({
		language:  "zh-CN",
		format: "yyyy-mm-dd",//显示格式
		initialDate: new Date(),//初始化当前日期
		minView : 2,
		autoclose: true,//选中自动关闭
		todayBtn: true, //显示今日按钮
		clearBtn : true,
		pickerPosition: "bottom-left"
	});

	//异步查询指定条件的市场活动数据
	function queryActivities(){
		refresh(1,3);
	}

	//弹出模态窗口
	function openAddModal(){
		$('#createActivityModal').modal('show');
		//异步查询所有者数据
		$('#edit-marketActivityOwner').html("");
	}

	//保存或更新
	function saveOrUpdate($this){
		let form;
		if($this.text() == "保存"){
			//执行添加操作
			form = $('#addForm');
			$('#createActivityModal').modal('hide');
		}else{
			//执行修改操作
			form = $('#updateForm');
			$('#editActivityModal').modal('hide');
		}
		$.post('/crm/activity/saveOrUpdate',form.serialize(),function (data){
			//data:ResultVo
			if(data.ok){
				alert(data.message);
				//刷新数据
				refresh(1,3);
				//关闭模态窗口
			}
		},'json');
	}

	//打开修改模态窗口
	function openEditModal(){
		$('#editActivityModal').modal('show');
		//异步查询所有者数据


		//获取勾中的数据的主键
		let id = $('.son:checked')[0].value;
		//异步查询市场活动数据
		$.get('/crm/activity/queryById',{'id':id},function (activity) {
			//data:Activity 把数据设置到页面上
			$('#edit-marketActivityName').val(activity.name);
			$('#edit-startTime').val(activity.startDate);
			$('#edit-endTime').val(activity.startDate);
			$('#edit-cost').val(activity.cost);
			$('#edit-describe').val(activity.description);
			$('#id').val(activity.id);

			//选中当前市场活动指定的所有者
			$('#edit-marketActivityOwner').val(activity.owner);
		},'json');
	}

	//批量删除
	function deleteBatch(){
		//勾中的市场活动主键拼接
		let ids = [];
		$('.son:checked').each(function (){
			ids.push($(this).val());
		});
		$.get('/crm/activity/deleteBatch',{'ids':ids.join()},function (data) {
			//data:ResultVo
			if(data.ok){
				alert(data.message);
				//刷新数据
				refresh(1,3);
			}
		},'json');
	}

	//导出报表
	function exportExcel(){
		location.href = "/crm/exportExcel";
	}
</script>